<template>
  <div 
    class="interval-component" 
    :style="{'height': config.height, 'background': config.bgColor}">
  </div>
</template>
<script>
export default {
    props: {
      itemComponent: { // 组件信息
        type: Object,
        default: () => {}
      },
    },
    data() {
      return {
        config: {}
      }
    },
    watch: {
      itemComponent: { // 监听组件配置信息
        handler(newVal, oldVal) {
          if(JSON.stringify(newVal.rightConfigMessage) != '{}') {
            this.config = {
              height: newVal.rightConfigMessage.height + 'px',
              bgColor: newVal.rightConfigMessage.bgColor
            }
          } else {
            this.config = {
              height: '20px',
              bgColor: 'rgba(244, 244, 244, 1)'
            }
          }
        },
        deep: true,
        immediate: true
      }
    }
}
</script>
<style lang="scss" scoped>
.interval-component {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9FA4B1;
}
</style>